<template>
      <div class="home-con">
          <v-swper></v-swper>
          <div class = "img1">
               <img :src= list1>
          </div>
          <div class="list-box">
              <ul>
                  <li v-for = "item in list2">
                        <img v-lazy="item.imageUrl" >
                        <p>{{item.remark}}</p>
                  </li>

              </ul>
          </div>
          <div class="pic1"><img src = "../../common/img/a4.jpg"></div>
          <div class="pic2">
                  <div><img :src = list3[0]></div>
                  <div>
                          <div><img :src = list3[1]></div>
                          <div>
                                <img :src = list3[2]>
                                <img :src = list3[3]>
                          </div>
                  </div>
          </div>
          <div class = "img1"><img :src= list4></div>
          <div class="pic3">
                <ul>
                      <li v-for = "item in list5">
                            <img v-lazy="item.imageUrl" >
                      </li>
                </ul>
          </div>
          <div class = "img1"><img :src= list6></div>
          <div class="pic4">
              <ul>
                  <li v-for="item in list7">
                      <img v-lazy="item.imageUrl">
                      <div class="rdm">
                          <span  v-if="item.data.promotionDisplayLable == '特价' ">特价</span>
                          <span  v-else="item.data.promotionDisplayLable == '特价' ">买一送一</span>
                          <img :src=item.data.cornerSign[0] class="mysy">
                          <span  v-if="item.data.promotionList.length == 2 ">买一送一</span>
                      </div>
                      <p> {{item.data.name}}</p>
                      <div class="pris">
                          <div>
                                <span>￥{{(item.data.price/100).toFixed(2)}}</span>
                                <span>￥{{(item.data.promotionPrice/100).toFixed(2)}}</span>
                          </div>
                          <div>
                                <i class="icon iconfont icon-8"></i>
                          </div>
                      </div>
                  </li>

              </ul>
          </div>
          <div v-for="obj in list11">
              <div class = "img1" v-for = "ite in obj.a.dataList"><img :src= ite.imageUrl></div>
              <div class="pic4">
                  <ul>
                      <li v-for="item in obj.b.dataList">
                          <img v-lazy="item.imageUrl">
                          <div class="rdm">
                              <span  v-if="item.data.promotionDisplayLable == '特价' ">特价</span>
                              <span  v-else="item.data.promotionDisplayLable == '特价' ">买一送一</span>
                              <img :src=item.data.cornerSign[0] class="mysy">
                              <span  v-if="item.data.promotionList.length == 2 ">买一送一</span>
                          </div>
                          <p> {{item.data.name}}</p>
                          <div class="pris">
                              <div>
                                    <span>￥{{(item.data.price/100).toFixed(2)}}</span>
                                    <span>￥{{(item.data.promotionPrice/100).toFixed(2)}}</span>
                              </div>
                              <div>
                                    <i class="icon iconfont icon-8"></i>
                              </div>
                          </div>
                      </li>

                  </ul>
              </div>
          </div>
      </div>
</template>

<script>
import Swper from "../swper";
export default{
    components: {
        "v-swper":Swper
    },
    data(){
        return {
            lists:[],
            list1:"",
            list4:"",
            list6:"",
            list2:[],
            list3:[],
            list5:[],
            list7:[],
            list8:[],
            list9:[],
            list10:[],
            list11:[],
            obj:{}
        }
    },
    methods:{
        request(){
            this.$http.get("./static/data/qqjx.json")
            .then(function(req){
                //console.log(req.body.data.pageModules);
                this.lists = req.body.data.pageModules;
                this.list1 = req.body.data.pageModules[1].dataList[0].imageUrl;
                for(var i in req.body.data.pageModules[2].dataList){
                    this.list2.push(req.body.data.pageModules[2].dataList[i]);
                }
                for(var i in req.body.data.pageModules[3].dataList){
                    this.list2.push(req.body.data.pageModules[3].dataList[i]);
                }
                for(var i in req.body.data.pageModules[5].dataList){
                    this.list3.push(req.body.data.pageModules[5].dataList[i].imageUrl);
                }
                console.log(this.lists);
                this.list4 = req.body.data.pageModules[6].dataList[0].imageUrl;
                for(var i in req.body.data.pageModules[7].dataList){
                    this.list5.push(req.body.data.pageModules[7].dataList[i]);
                }
                for(var i in req.body.data.pageModules[8].dataList){
                    this.list5.push(req.body.data.pageModules[8].dataList[i]);
                }
                for(var i in req.body.data.pageModules[9].dataList){
                    this.list5.push(req.body.data.pageModules[9].dataList[i]);
                }
                this.list6 = req.body.data.pageModules[10].dataList[0].imageUrl;
                this.list7 = req.body.data.pageModules[11].dataList;
                this.list8 = req.body.data.pageModules.slice(12,req.body.data.pageModules.length)
                console.log(this.list8)
                for(var i=0;i<this.list8.length;i+=2){
                    this.list9.push(this.list8[i])
                }
                for(var i=1;i<this.list8.length;i+=2){
                    this.list10.push(this.list8[i])
                }
                for(var i in this.list9){
                    this.obj.a = this.list9[i];
                    this.obj.b = this.list10[i];
                    this.list11.push(this.obj)
                    this.obj = {}
                }
                console.log(this.list11)

            })
        }
    },
    created(){
        this.request()
    }

}
</script>

<style scoped>
.home-con{
  position:absolute;
  left:0;
  right:0;
  top:0.84rem;
  bottom:0;
  overflow:auto;
  }
.list-box ul{display:flex;align-items:center;flex-wrap:wrap;}
.list-box ul li{width:20%;text-align:center;margin:0.1rem 0;}
.list-box ul li img{width:96%;}
.list-box ul li p{color:#888888}
.pic1{width:100%;height:1.25rem}
.pic2{display:flex;align-items:center;justify-content:space-between;}
.pic2>div{width:50%;}
.pic2>div img{width:100%}
.pic2>div:last-child div:last-child img{float:left;width:50%}
.pic3 ul{display:flex;align-items:center;flex-wrap:wrap;}
.pic3 ul li{width:33%;text-align:center;}
.pic3 ul li img{width:100%;}
.pic4 ul{display:flex;align-items:center;flex-wrap:wrap;}
.pic4 ul li{width:33%;position:relative}
.pic4 ul li img{width:88%;text-align:center;margin-left:6%}
.pic4 .rdm{padding:0 0.1rem}
.pic4 .rdm span{background-color:#FF6161;color:#fff;height:0.18rem;line-height:0.18rem;padding:0 0.05rem;font-weight:bold}
.pic4 ul li p{font-size:0.17rem;padding:0 0.1rem;height:0.44rem;overflow:hidden;}
.pic4 .pris div:first-child span{display:block;}
.pic4 .pris div:first-child span:first-child{text-decoration:line-through}
.pic4 .pris div:first-child span:last-child{font-size:0.17rem;color:#FF7734}
.pic4 .pris {display:flex;align-item:center;padding:0 0.1rem;justify-content:space-between;}
.pic4 .pris div:last-child{width:0.32rem;height:0.22rem;border:1px solid #FFB89C;text-align:center;line-height:0.22rem;margin-top:0.15rem}
.pic4 .pris div:last-child i{color:#FFB89C;}
.mysy{position:absolute;left:0;top:0}
.img1 img{width:100%}
img{
  -webkit-transition: all 2s;
  -o-transition: all 2s;
  transition: all 2s;
}
img[lazy=loading] {
  opacity: 0;
}
img[lazy=error] {

}
img[lazy=loaded] {
  opacity: 1;
}
</style>
